﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        form{
            width:400px;
            
            margin:200px auto;
        }
        select {
            outline:none;
            width: 93px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            float: left;
            margin: 0 10px 0 0;
            display: inline;
            
        }
    </style>
</head>
<body>
    <form action="">
        <select>
        </select>
        <select>
        </select>
        <select>
        </select>
    </form>
    <script src="area.js"></script>
    <script>
        var seles = document.querySelectorAll("select");
        let str = ``;
        let str1 = ``;
        let str2 = ``;
        for (let i of place.data) {
            str += `  <option value="aaa">${i.provname}</option>`
        }
        sel1(1);
        sel2(0, 0)
        seles[0].innerHTML = str;    
        
        seles[0].onchange = function () {
            str1 = ``;
            str2 = ``;
            sel1(this.selectedIndex);
            sel2(this.selectedIndex, 0);
         }
       
        seles[1].onchange = function () {
            str2 = ``;
            sel2(seles[0].selectedIndex, this.selectedIndex)
         }
        
        function sel1(num) {
            for (let j of place.data[num].city) {
                str1 += `<option value="aaa">${j.cityname}</option>`
            }
            seles[1].innerHTML = str1;
        }   
        function sel2(num,num1) {
            for (let k of place.data[num].city[num1].dist) {
               str2 += `<option value="aaa">${k}</option>`
            }
           seles[2].innerHTML = str2;
        }   
       
 </script>
</body>
</html>